<template>
  <div style="height: 100vh">
    <!-- <p class="loading">加载书籍中...</p> -->
    <div id="pdf-container-overflow"></div>
  </div>
</template>

<script>
import Pdfh5 from "pdfh5";

const pdfResourceUrl =
  "https://learningbay-20200428.oss-cn-shanghai.aliyuncs.com/fdu20cs/song-2022-ali.pdf";

// const loadingTask = createLoadingTask(pdfResourceUrl);

export default {
  data: () => ({
    pdfh5: null,
  }),
  created() {},
  mounted() {
    this.pdfh5 = new Pdfh5("#pdf-container-overflow", {
      pdfurl: pdfResourceUrl,
      lazy: true,
      // limit: 10,
    });
    //监听完成事件
    this.pdfh5.on("complete", function (status, msg, time) {
      console.log(
        "状态：" +
          status +
          "，信息：" +
          msg +
          "，耗时：" +
          time +
          "毫秒，总页数：" +
          this.totalNum
      );
    });
  },
};
</script>
<style scope>
@import "pdfh5/css/pdfh5.css";
.pdfjs .loadEffect {
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
#pdf-container-overflow {
  position: relative;
  top: 38px;
  height: calc(100% - 38px);
}
/* #pdf-container-overflow img {
  width: 100%;
} */
</style>
